<script setup lang="ts">
const el = ref(null)
const show = ref(false)
useIntersectionObserver(el, ([{ isIntersecting }]) => {
  if (isIntersecting)
    show.value = isIntersecting
})
</script>

<template>
  <div ref="el" class="zhongruixinxuan">
    <div class="content">
      <Transition name="animate-zoomIn">
        <img v-show="show" class="logo"
          src="https://public-oss-file.zmaxfilm.com/website-compress/zhongruixinxuan-title.png" alt="">
      </Transition>
      <div class="zuimeidianying">
        <Transition name="animate-fadeInLeft">
          <div v-show="show" class="flex flex-col">
            <p class="text-[24px] font-bold">
              中瑞心选
            </p>
            <p class="intro leading-[36px]">
              中瑞心选是以本地化娱乐消费服务为特色的移动电商运营平台，围绕B2B2C领域以精选更优质的福利商品为品牌宗旨，为企业客户提供电影福利、生日福利、年节福利等多元福利需求，致力于打造“更贴近消费生活、更融合文娱市场、更多元产品体验”的综合性文娱福利品牌。
            </p>
          </div>
        </Transition>
        <Transition name="animate-fadeInRight">
          <img v-show="show" class="img"
            src="https://public-oss-file.zmaxfilm.com/website-compress/zhongruixinxuan-image.png" alt="">
        </Transition>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.zhongruixinxuan {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 50px;

  .line-center-title {
    font-family: PangMenZhengDaoBiaoTiTi;
    margin-bottom: 40px;
  }

  .content {
    display: flex;
    flex-direction: column;

    .intro {
      color: #666666;
      font-size: 18px;
      font-weight: 500;
      margin-top: 10px;
    }

    .logo {
      width: 170px;
      height: 50px;
      margin: 0 auto 45px auto;
    }

    .zuimeidianying {
      gap: 46px;
      display: flex;
      position: relative;
      min-height: 400px;

      .img {
        width: 529px;
        height: 400px;
      }

      .float-card {
        display: flex;
        align-items: center;

        .item {
          flex: 1;
          gap: 20px;
          display: flex;
          flex-shrink: 0;
          position: relative;
          align-items: center;
          flex-direction: column;

          &::after {
            right: 0;
            width: 1px;
            height: 48px;
            content: '';
            position: absolute;
            background-color: #CCCCCC;
          }

          &:last-child::after {
            content: none;
          }
        }
      }
    }
  }
}
</style>
